<template>
    <div class="acitve-view-member-member">
        <div class="memberMod">
             <div class="head-part">
                <h3 class="welcome-title">Hello，银卡会员</h3>
                <div class="half-enter">
                    <span>
                        <i style="background-position: -50px 0;"></i>
                        <p>会员中心</p>
                    </span>
                    <span>
                        <i></i>
                        <p>会员专属码</p>
                    </span>
                </div>
                <div class="quarter-enter">
                    <ul class="row">
                        <li>
                            <div>
                                <em>￥:<i>0.00</i></em>
                                <p>余额</p>
                            </div>
                        </li>
                        <li>
                            <div>
                                <em>{{list.point}}</em>
                                <p>积分</p>
                            </div>
                        </li>
                        <li>
                            <div>
                                <em>581</em>
                                <p>成长值</p>
                            </div>
                        </li>
                        <li>
                            <div>
                                <em>0</em>
                                <p>优惠券</p>
                            </div>
                        </li>

                    </ul>
                </div>
                <ul class="rights-enter">
                    <li v-for="item in list2">
                        <a href="">
                            <i><img :src="item.logo" alt=""></i>
                            <p>{{ item.name }}</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i><img src="../../common/img/more-rights.png" alt=""></i>
                            <p>全部权益</p>
                        </a>
                    </li>
                   
                </ul>
            </div>
        </div>


        <div class="sign-in">
            <a href="">
                <img src="http://img.dmall.com/common/1a0cb91b-f2c4-4d90-87f0-7176f01b8ece" alt="">
            </a>
        </div>

        <div class="announcement">
            <h4>会员公告</h4>
            <div>
                <a href="">物美会员升级，点击了解更多升级福利！</a>
            </div>
        </div>
        
        <div class="img">
            <img src="../../common/img/3.png" alt="">
            <img src="../../common/img/1.png" alt="">
            <img src="../../common/img/2.png" alt="">
        </div>
      
    </div>
</template>
<script>
export default{
    data(){
        return {
            list:[],
            list1:"",
            list2:[]
        }
   },
    methods:{
        request(){
            this.$http.get("./static/data/vip.json")
            .then(function(req){
                this.list = req.body.data;
                // console.log(this.list);
                this.list1 = req.body.data.levelName;
                this.list2 = req.body.data.welfares.slice(0,4)
            })
        }
    },
    created(){
        this.request()
    }


}
</script>
<style scoped>
    img{
        float: left;
        width: 100%;
        height: auto;
    }
    i,em,a{
        font-style: normal;
    }
    .acitve-view-member-member{
        width: 100%;
        background-color: #f6f6f6;
    }
    .memberMod{
        width: 100%;
        display: flex;

    }
    .welcome-title {
        text-align: center;
        color: #fff;
        height: 40px;
        line-height: 40px;
        padding: 10px 15px 0;
        font-size: 16px;
        font-weight: 400;
    }
    .head-part{
        background: linear-gradient(135deg,#d1dce3 0,#90a3b1 280px);
        width: 100%;
        height: auto;
        position: relative;
        min-height: 1.67rem;
    }
    .half-enter{
        width: 100%;
        margin-top: 0.1rem;
        height: 0.62rem;
        display: flex;
    }
    .half-enter span{
        display: block;
        width: 50%;
        text-align:center;
        color: #fff;
        font-size: 12px;
        float: left;
    }
    .half-enter i{
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url("../../common/img/sprt(1).png");
        background-size: 200px auto;
        background-repeat: no-repeat;
    }
    .quarter-enter{
        width: 93%;
        padding: 0 0.15rem;
        position: absolute;
        left: 0;
        z-index: 2;
        margin-top: 0.15rem;
        display: flex;
        height: auto;
    }
    .row{
        width: 100%;
        padding: 10px 0;
        border-radius: 3px 3px 0 0;
        background-color: #fff;
        box-shadow: 0 0 5px 1px rgba(0,0,0,.1);
        display: flex;
        height: auto;
    }
    .row li{
        float: left;
        width: 25%;
        border-right: 1px solid #f0f0f0;
        text-align: center;
        height: auto;
    }
    .rights-enter{
        width: 100%;
        height: auto;
        display: flex;
        margin-top: 0.60rem;
        position: relative;
        z-index: 1;
        padding: 20px 15px 10px;
        background-color: #fff;
    }
    .rights-enter li{
        width: 20%;
        height: auto;
        float: left;
        min-height: 49px;
        text-align: center;
    }
    .rights-enter i{
        display: inline-block;
        width: 0.32rem;
        height: 0.32rem;
    }
    a{
        color: gray;
    }
    .rights-enter p{
        font-size: 12px;
    }
    .announcement {
        width: 100%;
        margin-top: 10px;
        float: left;
    }
    .announcement h4{
        float: left;
        font-size: 12px;
        line-height: 0.2rem;
        width: 0.6rem;
        height: 0.2rem;
    }
    .announcement div{
        float:left;
        padding-left: 0.05rem;
        line-height: 18px;
    }
    .announcement a{
        font-size: 9px;
    }
    .img{
        width: 100%;
        height: auto;
        margin-top: 0.4rem;
    }
    .sign-in{
        position: fixed;
        right: 15px;
        bottom: 70px;
        width: 65px;
        height: 65px;
        z-index: 1103;
    }

</style>
